import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../utils/utils.dart';
import './api.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  TextEditingController _unameController = new TextEditingController();
  TextEditingController _pwdController = new TextEditingController();

  //初始化状态
  @override
  void initState() {
    // 自动填充上次登录的用户名
    Future<String> userName = Utils.getCacheData('username');
    userName.then((String userName) {
      _unameController.text = userName;
    });
    super.initState();
  }

  //构建组件
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFffffff),
      appBar: new AppBar(
        title: new Text(''),
        backgroundColor: Color(0xFFffffff),
        elevation: 0, //默认是4， 设置成0 就是没有阴影了
        iconTheme: IconThemeData(
          color: Colors.black38,
        ),
      ),
      body: SingleChildScrollView(
          padding: EdgeInsets.all(15),
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              _pageHead(),
              Form(
                  key: _formKey,
                  autovalidate: true,
                  child: Container(
                    padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
                    child: Column(
                      children: <Widget>[
                        _userName(),
                        _passWord(),
                        _loginButton()
                      ],
                    ),
                  )),
            ],
          )),
    );
  }

  //顶部部分
  Widget _pageHead() {
    return Container(
        padding: EdgeInsets.all(20.0), //容器内补白
        child: new Column(children: <Widget>[
          Padding(
            //上下左右各添加16像素补白
            padding: EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "手机号登录",
                  style: TextStyle(
                    color: Color(0xFF000000),
                    fontSize: 25,
                  ),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("未注册手机号验证后将自动登录",
                  style: TextStyle(
                    color: Color(0xFF666666),
                  )),
            ],
          ),
        ]));
  }

  Widget _userName() {
    return Container(
        height: 80,
        child: TextFormField(
            autofocus: false,
            textInputAction: TextInputAction.go,
            decoration: InputDecoration(
              /*labelText: "用户名",*/
              hintText: "请输入手机号",
              prefixIcon: Icon(
                Icons.person,
                color: Colors.black,
                size: 32.0,
              ),
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              //获得焦点下划线设为蓝色
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
              ),
            ),

            // 校验用户名（不能空）
            validator: (value) {
              RegExp reg = new RegExp(r'^\d{11}$');
              if (!reg.hasMatch(value)) {
                return '请输入11位手机号码';
              }
              return null;
            }));
  }

  Widget _passWord() {
    return Container(
        height: 80,
        child: TextFormField(
            autofocus: false,
            textInputAction: TextInputAction.go,
            decoration: InputDecoration(
              /*labelText: "密码",*/
              hintText: "请输入密码",
              prefixIcon: Icon(
                Icons.lock,
                color: Colors.black,
                size: 32.0,
              ),
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              //获得焦点下划线设为蓝色
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
              ),
            ),
            obscureText: true,
            validator: (v) {
              return v.trim().length > 5 ? null : "密码不能少于6位";
            }));
  }

  Widget _loginButton() {
    return Padding(
      padding: const EdgeInsets.only(top: 28.0),
      child: Row(
        children: <Widget>[
          Expanded(
            child: RaisedButton(
              padding: EdgeInsets.all(15.0),
              child: Text("登录"),
              textColor: Colors.black,
              onPressed: () {
                print('loginButton');
                if ((_formKey.currentState as FormState).validate()) {
                  //保存数据
                  _formKey.currentState.save();
                  Utils.setCacheData('username', _unameController.text);
                  //验证通过提交数据
                  API.test('').then((res) {
                    print('API:Test-validate');
                    print(res);
                  });
                }
              },
            ),
          ),
        ],
      ),
    );
  }
}
